import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import {getCookie,getDate} from '../../../config/omsCookiesFun';
export default class Left extends Component{
  constructor(props){
    super(props);
    this.state = {
      menuList:[
        {
          name:"首页管理",
          url:"/", 
          ico:'fa-dashboard'
        },
        {
          name:"订单管理",
          ico:'fa-list-alt',
          child:[
            {
              name:'订单管理',
              child:[
                {name:'扣款批量单',url:'/test1-2'},
                {name:'零散单列表',url:'/test2-2'},
                {name:'本地建单',url:'/test3-2'},
              ]
            },
            {
              name:'重点关注订单',
              child:[
                {name:'零散单确认报价',url:'/test4-2'},
                {name:'批次单确认报价',url:'/test5-2'},
              ]
            },
            {
              name:'批次单管理',
              child:[
                {name:'批次单列表',url:'/test6-2'},
              ]
            }

          ]
        },
        {
          name:"用户管理",
          ico:'fa-users',
          child:[
            {
              name:'用户管理',
              child:[
                {name:'OMS用户列表',url:'/test7-2'},
                {name:'合作客户列表',url:'/test8-2'},
              ]
            },
            {
              name:'合作商维修项目',
              child:[
                {name:'自定义随机附件',url:'/test9-2'},
              ]
            }

          ]
        },
        {
          name:"文件管理",
          ico:'fa-folder-open',
          child:[
            {name:'文件列表',url:'/test10-1'},
            {name:'合同资料',url:'/test11-1'},
          ]
        },
        {
          name:"产品分类管理",
          ico:'fa-sitemap',
          child:[
            {name:'TR内容管理',url:'/test12-1'},
            {name:'品牌质保信息',url:'/test13-1'},
          ]
        },
        {
          name:"基项管理",
          ico:'fa-arrows-alt',
          child:[
            {
              name:"运费管理",
              child:[
                {name:'新基础运费管理',url:'/test14-2'},
                {name:'旧基础运费管理',url:'/test15-2'},
              ]
            },
            {name:'产品附件列表',url:'/test16-1'},
          ]
        },
        {
          name:"维修报表",
          ico:'fa-bar-chart',
          child:[
            {name:'数据导出',url:'/test17-1'},
          ]
        },
        {
          name:"仓储管理",
          ico:'fa-database',
          child:[
            {
              name:'报表管理',
              child:[
                {name:'SAP库存同步报表',url:'/test18-2'},
                {name:'库存消耗报表',url:'/test19-2'},
              ]
            },
            {
              name:'辅助功能',
              child:[
                {name:'手动分配库存',url:'/test20-2'},
                {name:'借货管理',url:'/test21-2'},
                {
                  name:'仓库管理',
                  child:[
                    {name:'仓库列表',url:'/test22-3'},
                    {name:'仓库权限设置',url:'/test23-3'},
                  ]
                },
              ]
            },
          ]
        },
        {
          name:"系统管理",
          ico:'fa-cog',
          child:[
            {name:'快捷菜单设置',url:'/test24-1'},
            {name:'公告管理',url:'/system/notice'},
            {name:'修改密码',url:'/test25-1'},
          ]
        },
        {
          name:"个案管理",
          ico:'fa-comments',
          child:[
            {name:'创建个案',url:'/test26-1'},
            {name:'个案列表',url:'/test27-1'},
          ]
        },
        {
          name:"转运管理",
          ico:'fa-retweet',
          child:[
            {name:'转运列表',url:'/test28-1'},
          ]
        },
      ]
    }
  }
  loopHtmlFun(item){
    var _this = this;
    return <ul className="collapse">{
      item.map((el, index) =>{
        return <li key={index}>
                  {
                    el.url? <NavLink exact={index === 0} to={el.url}>{el.name}</NavLink>:
                    <a className="parent">{el.name}</a>
                  }
                  {
                    el.child ?_this.loopHtmlFun(el.child):''
                  }
                </li>
      })
    }</ul>
  }
  componentDidMount() {
    (function($){
          $('#container').on('click','#button-menu', function() {
              $('#menu ul').removeClass("in");
              if ($('#column-left').hasClass('active')){
                  $('#button-menu i').replaceWith('<i class="fa fa-indent fa-lg"></i>');
                  $('#column-left').removeClass('active');
                  $('#menu > li > ul').removeClass("collapse");
                  $('#menu > li > ul').removeAttr('style');
                  $("#footer").removeClass("active")
              } else {
                  $('#button-menu i').replaceWith('<i class="fa fa-dedent fa-lg"></i>');
                  $('#column-left').addClass('active');
                  $('#menu > li > ul').addClass("collapse");
                  $('#menu a.active').parents("ul").addClass("in");
                  $("#footer").addClass("active")
              }
          });
          $('#menu').find('li').children('a').on('click', function() {
              if ($('#column-left').hasClass('active')) {
                  $(this).parent('li').toggleClass('open').children('ul').slideToggle();
                  $(this).parent('li').siblings().removeClass('open').children('ul').slideUp();
              } else if (!$(this).parent().parent().is('#menu')) {
                  $(this).parent('li').toggleClass('open').children('ul').slideToggle();
                  $(this).parent('li').siblings().removeClass('open').children('ul').slideUp();
              }
          });

          $("#menu li .active").parents("ul").addClass("in");
          
          if($(window).width() < 900){
            $("#column-left").removeClass("active");
            $('#menu > li > ul').removeClass('collapse');
          }

    })(window.jQuery)
    
  }

  render(){
    var _this = this,
        item = _this.state.menuList,
        userInfo = getDate(getCookie('userInfo')),
        pathname = window.location.pathname,
        leftShow = true,
        tempMenuList = [];
    if(pathname === '/login' || pathname === '/register'){
       leftShow = false;//登录跟注册页面隐藏左边的菜单栏
    }
    
    for(var i = 0, len = item.length;i < len; i++){
      tempMenuList.push(
        <li key={i}>
          {
            item[i].url? <NavLink exact={i === 0} to={item[i].url}><i className={`fa ${item[i].ico}`}></i><span>{item[i].name}</span></NavLink>:
            <a className="parent"><i className={`fa ${item[i].ico}`}></i><span>{item[i].name}</span></a>
          }
          {
            item[i].child ? _this.loopHtmlFun(item[i].child) : ''
          }
        </li>
      );
    }
    return(
      <nav id="column-left" className="active" style={{display:leftShow?'block':'none'}}>
        <div id="profile">
          <div><i className="fa fa-user fa-fw"></i></div>
          <div>
            <h4>{userInfo.userName}</h4>
            <small>{userInfo.role}</small>
          </div>
        </div>
        <ul id="menu">
          {tempMenuList}
        </ul>
      </nav>
     
    );
  }
}